<script>
import { getSearchFilm, getSearchCinemas } from '../api/search.js'
import { reactive, watch } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import {useStore} from 'vuex'
export default {
    // 组合式api
    setup() {
        const state=useStore()
        const router = useRouter()
        let obj = reactive({
            movielist: [],//电影列表
            cinemalist: [],//影院列表
            keyword: '',
            cityId: null,
            keyTime: null,
            hslist: [],
            showIcon: false,
            flag: true,
            tablist: ['电影', '影院'],
            tabindex: 0,
            loading: false,
        })



        let getSearchFilmFun = (word, ci) => {
            getSearchFilm({ keyword: word, ci }).then(data => {
                // console.log(data);
                if (data.length) {
                    obj.loading = false
                }
                obj.movielist = data
            })
        }
        //搜影院
        let getSearchCinemaFun = (word, ci) => {
            getSearchCinemas({ keyword: word, ci }).then(data => {
                // console.log(data);
                if (data.length) {
                    obj.loading = false
                }
                obj.cinemalist = data
            })
        }
        //删除历史记录
        let del = (index) => {
            obj.hslist.splice(index, 1)
            window.localStorage.setItem("hslist", JSON.stringify(obj.hslist))
        }
        //通过历史记录进行搜索
        let selectWord = (index) => {
            obj.keyword = obj.hslist[index]
        }
        //清空输入框
        let clear = () => {
            obj.keyword = ''
        }
        //切换tab
        let checktab = (index) => {
            obj.tabindex = index

        }
        // 注意：setup没有this 。没有this.$route

        let route = useRoute(); //获取跳转链接数据
        obj.cityId = route.query.ci==null?20:route.query.ci
        let temp = JSON.parse(window.localStorage.getItem("hslist"))
        obj.hslist = temp == null ? [] : temp

        let godetail = (id) =>{
            state.commit("detail",id)
                router.push(
                 {
                   path :'/moviedetail',
                  
                 }
             )
        }

        let goCinema =(id) =>{
            router.push({ path: "/cinemadetail", query: { id, ci:obj.cityId } });
        }

        //监听输入
        watch(()=>obj.keyword, () => {
            
            obj.loading = true
            obj.showIcon = true
            obj.flag = false

            if (obj.keyword != "") {
                let isinclude = obj.hslist.includes(obj.keyword)
                if (!isinclude) {
                    obj.hslist = [...obj.hslist, obj.keyword]
                }
            }
            if (obj.keyTime !== null) {
                clearTimeout(obj.keyTime);
            }
            obj.keyTime = setTimeout(() => {
                window.localStorage.setItem("hslist", JSON.stringify(obj.hslist))
                getSearchFilmFun(obj.keyword, obj.cityId)
                getSearchCinemaFun(obj.keyword, obj.cityId)
            }, 500)
            if (obj.keyword == '') {
                obj.showIcon = false
                obj.flag = true
            }
        })



        return {
            obj,
            getSearchFilmFun,
            getSearchCinemaFun,
            del,
            selectWord,
            clear,
            checktab,
            godetail,
            goCinema
        }
    },
}
</script>

<template>
    <div class="page-search">
        <div class="layout">
            <div class="navbar-wrap">
                <div class="Navbarold">
                    <nav>
                        <router-link custom to="/home" v-slot="{ href, navigate, isActive }">
                            <div class="navbar-logo">
                                <span :href="href" @click="navigate" :class="[isActive && 'router-link-active']"
                                    class="navbar-back"></span>
                            </div>

                        </router-link>
                        <div class="navbar-title">猫眼电影</div>
                        <div class="navbar-button"></div>
                    </nav>
                </div>
            </div>

            <div class="page-content search-theme-default">
                <div class="search-wrapper">
                    <div class="search-header">
                        <div class="input-wrapper">
                            <img src="../assets/images/search.png" alt="" class="search-icon">
                            <input type="text" class="search-input" placeholder="搜电影、搜影院" v-model="obj.keyword">
                            <img v-if="obj.showIcon" src="../assets/images/maoyansearch.png" alt="" @click="clear"
                                class="del-input">
                        </div>
                        <router-link to="/" class="cancel">取消</router-link>
                    </div>
                    <div class="search-history" v-if="obj.hslist.length && obj.flag">
                        <div class="history-item" v-for="(item, index) in obj.hslist" :key="index">
                            <span class="history-icon"></span>
                            <div class="word one-line" @click="selectWord(index)">
                                {{ item }}
                            </div>
                            <div class="del-word" @click="del(index)"></div>
                        </div>
                    </div>
                    <div class="search-result" v-if="!obj.flag">
                        <div class="result-wrapper">
                            <div class="result">
                                <div class="checkTab">
                                    <h3 :class="{ 'active': obj.tabindex == index }" @click="checktab(index)"
                                        v-for="(item, index) in obj.tablist" :key="index">{{ item }}</h3>
                                </div>
                                <div class="list" v-if="obj.tabindex == 0">
                                        <div class="movie cell" v-for="(item) in obj.movielist" @click="godetail(item.id)" :key="item.id">
                                            <img :src="item.poster" v-lazy="item.poster" alt="" class="poster">
                                            <div class="info">
                                                <div class="name-score">
                                                    <p class="name">
                                                        <span class="one-line">
                                                            {{ item.name }}
                                                        </span>
                                                    </p>
                                                    <span class="score" v-if="item.score">
                                                        <span class="num">
                                                            {{ item.score }}
                                                        </span>
                                                        分
                                                    </span>
                                                </div>
                                                <div class="detail-section">
                                                    <div class="detail-items">
                                                        <p class="ename">{{ item.ename }}</p>
                                                        <p class="catogary">{{ item.catogary }}</p>
                                                        <div class="release">{{ item.release }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="list" v-if="obj.tabindex == 1">       
                                        <div class="cinema cell" v-for="item in obj.cinemalist" :key="item.id" @click="goCinema(item.id)">
                                            <div class="info">
                                                <p class="name-price">
                                                    <span class="name one-line">{{ item.info.name }}</span>
                                                    <span class="sell-price">
                                                        <span class="price">{{ item.info.price }}</span>远起
                                                    </span>
                                                </p>
                                                <p class="address one-line">
                                                    {{ item.info.address }}
                                                </p>
                                                <div class="feature-tags">
                                                    <span :class="{ 'featrue': k == '小吃' }"
                                                        v-for="(k, i) in item.info.tags" :key="i">{{ k }}</span>
                                                    <!-- <span class="featrue">小吃</span> -->
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="list" v-if="(!obj.movielist.length || !obj.cinemalist.length) && !obj.loading">
                                    <div class="nothing">
                                        <img src="../assets/images/nothing.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="loading" v-if="obj.loading">
                                <van-loading type="spinner" size="24px">搜索中...</van-loading>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page-search {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #f5f5f5;

    .layout {
        .navbar-wrap {
            .Navbarold {
                background-color: #e54847 !important;
                height: 38px;
                overflow: hidden;
                position: relative;
                padding: 6px;
                box-sizing: content-box;

                &>nav {
                    width: 100%;
                    display: -webkit-box;

                    .navbar-logo {
                        width: 100px;
                        background-size: 37%;

                        .navbar-back {
                            width: 36px;
                            height: 36px;
                            display: block;
                            z-index: 999;

                            &::after {
                                content: '';
                                position: absolute;
                                width: 13px;
                                height: 13px;
                                top: 16px;
                                left: 12px;
                                transform: rotate(45deg);
                                border: 2px solid #fff;
                                border-width: 0 0 2px 2px;
                            }
                        }
                    }

                    .navbar-title {
                        -webkit-box-flex: 1;
                        color: #fff;
                        font-size: 18px;
                        text-align: center;
                        line-height: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        position: relative;
                    }

                    .navbar-button {
                        position: relative;
                        width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                    }
                }
            }
        }

        .page-content {
            .search-wrapper {
                background-color: #f5f5f5;
                height: 100%;

                .search-header {
                    display: flex;
                    align-items: center;
                    padding: 8px 0 8px 10px;
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #e5e5e5;
                    position: relative;
                    z-index: 1;

                    .input-wrapper {
                        padding: 0 10px;
                        border: 1px solid #e6e6e6;
                        border-radius: 5px;
                        background-color: #fff;
                        flex-grow: 1;

                        .search-input {
                            flex: 1;
                            border: none;
                            font-size: 13px;
                            color: #333;
                            line-height: 20px;
                            padding: 4px 0;
                            width: calc(100% - 40px);
                        }

                        .del-input {
                            width: 15px;
                            height: 15px;
                            float: right;
                            position: relative;
                            top: 6px;
                        }
                    }

                    .cancel {
                        height: 30px;
                        line-height: 30px;
                        padding: 0 10px;
                        font-size: 16px;
                        color: #f03d37;
                    }

                    .search-icon {
                        width: 15px;
                        height: 15px;
                        margin-right: 6px;
                        float: left;
                        position: relative;
                        top: 6px;
                    }
                }

                .search-history {
                    background-color: #fff;

                    .history-item {
                        margin-left: 15px;
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #e5e5e5;
                        line-height: 44px;
                        align-items: center;

                        .history-icon {
                            width: 15px;
                            height: 15px;
                            margin-right: 10px;
                            background: url("../assets/images/recent-search.png") no-repeat;
                            background-size: contain;
                            display: inline-block;
                            flex: 0 0 auto;
                        }

                        .word {
                            color: #333;
                            font-size: 15px;
                            flex: 1 1 auto;
                            display: inline-block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .del-word {
                            background-image: url("../assets/images/delete.png");
                            background-repeat: no-repeat;
                            background-position: 15px;
                            background-size: 10px;
                            align-self: center;
                            padding: 17px 15px;
                            width: 10px;
                            height: 10px;
                            flex: 0 0 auto;
                        }
                    }

                    .history-item:last-child {
                        border-bottom: none
                    }
                }

                .search-result {
                    display: block;

                    .result-wrapper {
                        height: 100%;

                        .result {
                            margin-bottom: 10px;
                            background-color: #fff;

                            .checkTab {
                                display: flex;
                                justify-content: space-around;

                                &>h3 {
                                    font-size: 15px;
                                    color: #999;
                                    padding: 9px 15px;
                                    position: relative;

                                }

                                .active {
                                    color: #e54847;

                                    &::after {
                                        content: '';
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        right: 0;
                                        margin: 0 auto;
                                        width: 20px;
                                        height: 2px;
                                        background-color: #f03d37;

                                    }
                                }
                            }

                            .list {
                                border-bottom: 1px solid #e6e6e6;
                                padding-left: 15px;
                                border-top: 1px solid #e6e6e6;

                                .movie {
                                    padding: 12px 0;
                                    min-height: 90px;
                                    border-bottom: 1px solid #e6e6e6;

                                    .poster {
                                        background-color: #eee;
                                        width: 64px;
                                        height: 90px;
                                        float: left;
                                        margin-right: 10px;
                                    }

                                    .info {
                                        margin-right: 15px;
                                        margin-top: 1px;

                                        .name-score {
                                            font-size: 16px;
                                            color: #222;
                                            display: flex;
                                            justify-content: space-between;
                                            margin-bottom: 2px;

                                            .name {
                                                height: 24px;
                                                line-height: 24px;
                                                display: flex;
                                                align-items: center;
                                                flex-grow: 1;
                                                max-height: 24px;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;

                                                .one-line {
                                                    display: inline-block;
                                                    font-weight: 700;
                                                    font-size: 17px;
                                                    white-space: nowrap;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                }
                                            }

                                            .score {
                                                color: #fa0;
                                                font-size: 16px;
                                                flex-shrink: 0;
                                                padding-left: 5px;

                                                .num {
                                                    font-size: 16px;
                                                }
                                            }
                                        }

                                        .detail-section {
                                            position: relative;

                                            .detail-items {
                                                flex-grow: 1;
                                                overflow: hidden;
                                                padding-right: 10px;
                                                margin-right: 48px;
                                                min-height: 64.5px;

                                                .ename {
                                                    height: 19.5px;
                                                    line-height: 19.5px;
                                                    font-size: 13px;
                                                    color: #666;
                                                    margin-top: 2px;
                                                    white-space: nowrap;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                }

                                                .release,
                                                .catogary {
                                                    height: 19.5px;
                                                    line-height: 19.5px;
                                                    font-size: 13px;
                                                    color: #666;
                                                    margin-top: 2px;
                                                }
                                            }
                                        }
                                    }
                                }

                                .cinema {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding: 15px 15px 15px 0;

                                    .info {
                                        flex: 1;
                                        overflow: hidden;

                                        .name-price {
                                            margin: 0;
                                            font-size: 16px;
                                            color: #000;
                                            margin-bottom: 6px;
                                            display: flex;

                                            .sell-price {
                                                font-size: 11px;
                                                color: #999;
                                                white-space: nowrap;
                                                margin-left: 10px;

                                                .price {
                                                    font-size: 17px;
                                                    color: #ef4238;
                                                }
                                            }
                                        }

                                        .address {
                                            font-size: 13px;
                                            color: #999;
                                        }

                                        .feature-tags {
                                            margin-top: 7px;

                                            &>span {
                                                border: 1px solid #589daf;
                                                color: #589daf;
                                                position: relative;
                                                display: inline-block;
                                                padding: 0 3px;
                                                height: 15px;
                                                line-height: 15px;
                                                border-radius: 2px;
                                                font-size: 12px !important;
                                                margin-right: 7px;
                                            }

                                            .featrue {
                                                color: #f90;
                                                border-color: #f90;
                                            }
                                        }
                                    }
                                }

                                .cell {
                                    border-bottom: 1px solid #e6e6e6;
                                }

                                .nothing {
                                    width: 100%;
                                    height: 80vh;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    background-color: #fff;

                                    &>img {
                                        width: 150px;
                                        height: 150px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &::-webkit-scrollbar {
        display: none;
    }
}

.loading {
    width: 100%;
    height: 80vh;
    position: fixed;
    top: 97px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>